<template>
  <div>
    <van-nav-bar
      title="分类商品"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="content">
      <div class="content_list" v-for="(item,index) in detailsList" 
      :key="index" 
      @click="goods_details(item.id)">
        <img :src="item.pic" alt="">
        <p class="classify-font">{{item.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted(){
    let id = this.$route.params.id
    this.$store.dispatch("getDetailsList",id)
  },
  computed:{
    detailsList:function(){
     return this.$store.state.classfiyStore.detailsList
    }
  },
  methods:{
    onClickLeft(){
      window.history.back()
    },
    goods_details(id){
      this.$store.dispatch("get_goods_details",id)
        this.$router.push({
          path:"/goods_details"
        }),
        this.$loading();
    }
  }
};
</script>

<style scoped>
.content{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0rem 0.15rem;
  box-sizing: border-box;
}
.content_list{
  width: 40%;
  height: 4.5rem;
  margin: 0.2rem;
  text-align: center;
}
img{
  width: 100%;
}
.classify-font{
  width: 100%;
  font-size:0.3rem;
  text-align: center;
}
</style>